<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.title {
				padding: 5px 15px 5px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
			
			[v-cloak] {
			  display: none;
			}
		</style>
		
		
		<style type="text/css">
            .mui-popover{
                position: fixed;
                width: 80%;
                height: 40%;
                border-radius: 0;
                left: 50%;
                top: 50%;
                margin: 0 auto;
                z-index: 9999;
                background-color: #fff;
                -webkit-transform: translateX(-50%) translateY(-50%);
                -moz-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
            }
            .mui-popover-arrow{
                display: none;
            }
        </style>
	</head>

	<body id="appHome">
		<header id="header" class="mui-bar mui-bar-nav" style="height: 56px;">
			<div style="padding: 0px 0px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" ival="1">待确认</a>
					<a class="mui-control-item" ival="12">待配送</a>
					<a class="mui-control-item" ival="2">待取餐</a>
					<a class="mui-control-item" ival="21">配送中</a>
					<a class="mui-control-item" ival="">全部</a>
				</div>
			</div>
		</header>
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--
				<div style="padding: 1px 1px;">
					<div id="segmentedControl" class="mui-segmented-control">
						<a class="mui-control-item mui-active" ival="">全部</a>
						<a class="mui-control-item" ival="1">代确认</a>
						<a class="mui-control-item" ival="12">待配送</a>
						<a class="mui-control-item" ival="2">待取餐</a>
						<a class="mui-control-item" ival="21">配送中</a>
					</div>
				</div>
				-->
			<!--
				<div class="title">
					<button type="button" class="mui-btn" ival="">
						全部
					</button>
					<button type="button" class="mui-btn" ival="1">
						代确认
					</button>
					<button type="button" class="mui-btn" ival="12">
						待配送
					</button>
					<button type="button" class="mui-btn" ival="2">
						待取餐
					</button>
					<button type="button" class="mui-btn" ival="21">
						配送中
					</button>
					<button type="button" class="mui-btn" ival="3">
						送达
					</button>
				</div>
			-->
				<ul class="mui-table-view mui-table-view-chevron">
					<!--
					<li class="mui-table-view-cell">
						<a href="" class="mui-navigate-right">Item 1</a>
					</li>
					-->
						 
					<!--<div class="mui-card" :orderid="order.id"  v-for="order in rsPrds"  @click="procOrder(order.id)"  v-cloak>-->
					<div class="mui-card"  v-for="order in rsPrds"  v-cloak>
						<div class="mui-card-header" :orderid="order.id" v-if="order.state==50 || order.state==51 || order.state==52 || order.state==53 || order.state==54 || order.state==58 || order.state==59" style="background-color: red;color: white;">{{order.state|orderStatus}}</div>
						<div class="mui-card-header" :orderid="order.id" v-else style="background-color: deepskyblue;color: white;">{{order.state|orderStatus}}</div>
						<div class="mui-card-content" id="c{{order.id}}" :orderid="order.id" v-show="order.create_time.date==order.curDate && order.create_time.year==order.curYear && order.create_time.month==order.curMonth">
							<div class="mui-card-content-inner">
								<table border=0 width="100%" height="100%">
									<tr>
										<td align="left">单号:</td>
										<td>
											<font color="red" v-if="order.id==m_iNewOrderId">{{order.id}}</font>
											<font color="black" v-else>{{order.id}}</font>
										</td>
										<td align="right">下单时间:</td>
										<td align="right">{{order.create_time|formattime 'noyearsecond'}}</td>
									</tr>
									<tr style="border-bottom:deepskyblue solid 1px;  background-color:#ffffff;">
										<td align="left">状态:</td>
										<td>{{order.state|orderStatus}}</td>
										<td align="right">送达时间:</td>
										<td align="right">{{order.booktime|formattime 'noyearsecond'}}</td>
									</tr>
								</table>
								
								<table border=0 width="100%" height="100%">
									<tr height="40px">
										<td align="left" width="25%" style="font-size: 20px;">{{order.consignee}}</td>
										<td align="right">手机:{{order.mobile}}</td>
									</tr>
									<tr style="border-bottom:deepskyblue solid 1px;  background-color:#ffffff;">
										<td align="left">地址:</td>
										<td align="left">{{order.address}}</td>
										
									</tr>
								</table>
								
								<table border=0 width="100%" height="100%">
									<tr  v-for="de in order.Detail">
										<td align="left" width="57%">{{de.goods_name|cutString 10}}</td>
										<td align="left" width="5%">{{de.COUNT}}份</td>
										<td align="right" width="10%">¥:{{de.unitprice|cutDadixPoint 2}}</td>
										<td align="right" width="18%">总价:</td>
										<td align="right" width="10%">¥:{{de.unitprice*de.COUNT|cutDadixPoint 2}}</td>
									</tr>
									
									<tr style="border-bottom:deepskyblue solid 1px;  background-color:#ffffff;">
										<td align="left" colspan="3"></td>
										<td align="right" width="18%">合计:</td>
										<td align="left">{{order.amount|cutDadixPoint 2}}</td>
									</tr>
								</table>
								
								<table border=0 width="100%" height="100%">
									<tr>
										<td align="left" width="35%">配送:{{order.express_company_name}}</td>
										<td align="right">电话:{{order.express_company_tel}}
											
										</td>
									</tr>
								</table>
							</div>
						</div>

					</div>
						 
					
				</ul>
			</div>
		</div>
		
		
		<div id="topPopover" class="mui-popover">
		  <ul class="mui-table-view mui-table-view-radio">
				<li class="mui-table-view-cell mui-selected">
					<a class="mui-navigate-right">
						已经下班
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						没有原料
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						其他
					</a>
				</li>
			</ul>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>取消原因</label>
					<input type="text" id="txtReason" class="mui-input-clear" placeholder="取消原因" value="已经下班">
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary" onclick="fnCancleOrder();return false;">确认</button>&nbsp;&nbsp;
					<button type="button" class="mui-btn mui-btn-danger" onclick="mui('.mui-popover').popover('toggle');return false;">取消</button>
				</div>
			</form>
		</div>

		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vuetools.js"></script>
		<script src="../../js/tools.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
		<script>
		
		var objMap = new Array();	
		var m_curOrder;	
			
		document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){
			document.getElementById("txtReason").value = e.detail.el.innerText;
		});
		//商家取消订单
		function fnCancleOrder()
		{
			sespost('/zdm/AppApi/SupplierOrder/CancelSupplierOrder',
				{OrderId:m_curOrder.id,cancel_reason:document.getElementById("txtReason").value},
				function(data)
				{
					if(data.succ == 1)
					{
						m_curOrder.state = 51;
						mui('.mui-popover').popover('toggle');
					}
				}
			);
		}
			
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down:
				{
					callback: pulldownRefresh
				},
				up: 
				{
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		
		function pulldownRefresh() 
		{
			setTimeout(function() 
			{
				theVue.getOrdersByCat(m_strOrderStatus);
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				mui('#pullrefresh').pullRefresh().refresh(true);			
			}, 1000);
		}
		
		function pullupRefresh() 
		{
			setTimeout(function() 
			{
				//alert(theVue.iCurPageNo+"-"+theVue.m_iPageCount);
				mui('#pullrefresh').pullRefresh().endPullupToRefresh((theVue.iCurPageNo >= theVue.m_iPageCount)); //参数为true代表没有更多数据了。
				if(theVue.iCurPageNo <= theVue.m_iPageCount)
				{
					theVue.loadOrders();
				}
			}, 1000);
		}
			
//			(function($) 
//			{	
//				
//				mui('.mui-bar-tab').on('tap', 'a', function()
//				{
//					//var targetTab = this.getAttribute('href');
//					//更换标题
//					var strMainMenuName = this.querySelector('.mui-tab-label').innerHTML;
//					document.getElementById("title").innerHTML = strMainMenuName;
////					if(strMainMenuName=="管理" || strMainMenuName=="设置")
////					{
////						document.getElementById("headnav").style.visibility = "hidden";
////					}
////					else
////					{
////						document.getElementById("headnav").style.visibility = "visible";
////					}
//						
//				});
//				
				mui('#segmentedControl').on('tap', 'a', function()
				{
					//alert(this.getAttribute("ival"));
					theVue.getOrdersByCat(this.getAttribute("ival"));
					mui('#pullrefresh').pullRefresh().refresh(true);		
				});
				
				mui('#pullrefresh').on('tap', '.mui-card-header', function()
				{
					//alert(this.getAttribute("orderid"));
					var strCurOrdId = this.getAttribute("orderid");
					if(document.getElementById("c"+strCurOrdId).style.display == "inline")
					{
						document.getElementById("c"+strCurOrdId).style.display="none";
					}
					else
					{
						document.getElementById("c"+strCurOrdId).style.display="inline";
					}
					
				});
				
				mui('#pullrefresh').on('tap', '.mui-card-content', function()
				{
					var strCurOrdId = this.getAttribute("orderid");
					
					theVue.procOrder(strCurOrdId);
				});
//				
//			})(mui);
			


		</script>
		
		<script>
	var m_strOrderStatus = "1";
	var g_iConstPageSize = 5;
	
	
	var theVue = new Vue(
	{
	  el: '#appHome',
	  created:function()
	  {
	  	this.loadOrders();
	  },
	  data: {
	  	iCurPageNo:1,
	  	m_iPageCount:1,
	    rsPrds:[],
	    m_iNewOrderId:0
	  },
	  methods:
	  {
	  	  procOrder:function(p_orderid)
	  	  {
	  	  	  

	  	  		//e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
//				var btnArray = ['取消','确认','配送确认','送出'];
//				mui.confirm('MUI是个好框架，确认？', 'Hello MUI', btnArray, function(e) {
//					if (e.index == 1) {
//						info.innerText = '你刚确认MUI是个好框架';
//					} else {
//						info.innerText = 'MUI没有得到你的认可，继续加油'
//					}
//				})

				//alert(b.index+"-"+p_orderid);

				if (mui.os.plus) 
				{
					//var objOrder = null;
					for(var i=0;i<theVue.rsPrds.length;i++)
					{
						var strOrderId = theVue.rsPrds[i].id;
						if(strOrderId == p_orderid)
						{
							m_curOrder = theVue.rsPrds[i];
							break;
						}
					}
					
					var buts;
					
					//[{title: "接单确认"}, {title: "配送确认"}, {title: "送出"}];
					switch(m_curOrder.state)
					{
						case 1:
							buts = [{title: "接单确认"},{title: "取消订单"}];
						break;
						
						case 12:
							buts = [{title: "配送确认"}];
						break;
						
						case 2:
							buts = [{title: "取货"}];
						break;
						
						case 21:
							buts = [{title: "送达"}];
						break;
						
						case 4:
							buts = [{title: "评价"}];
						break;
					}
					
					plus.nativeUI.actionSheet(
					{
						title: "订单处理",
						cancel: "取消",
						buttons: buts
					},
					function(sel) 
					{
						//alert(sel.index);
						if(sel.index==0||sel.index==-1)
						{
							return;
						}
						
						switch(buts[sel.index-1].title)
						{
							case "接单确认":
								
								sespost('/zdm/AppApi/SupplierOrder/updateOrderOk',
									{OrderId:p_orderid},
									function(data)
									{
										if(data.succ == 1)
										{
											m_curOrder.state = 12;
											
										}
									}
								);
							break;
							
							case "取消订单":
								mui('.mui-popover').popover('toggle');

							break;
							
							case "配送确认":
								//m_curOrder.state = 2;
								sespost('/zdm/AppApi/SupplierOrder/updateOrderDevOk',
									{OrderId:p_orderid},
									function(data)
									{
										if(data.succ == 1)
										{
											m_curOrder.state = 2;
										}
									}
								);
							break;

							case "取货":
								//m_curOrder.state = 21;
								sespost('/zdm/AppApi/SupplierOrder/updateOrderDevBeTaken',
									{OrderId:p_orderid},
									function(data)
									{
										if(data.succ == 1)
										{
											m_curOrder.state = 21;
										}
									}
								);
							break;

							case "送达":
								//m_curOrder.state = 3;
								sespost('/zdm/AppApi/SupplierOrder/updateOrderDevComplet',
									{OrderId:p_orderid},
									function(data)
									{
										if(data.succ == 1)
										{
											m_curOrder.state = 3;
										}
									}
								);
							break;
							
							case "评价":
								//m_curOrder.state = 5;
								sespost('/zdm/AppApi/SupplierOrder/updateOrderIsOver',
									{OrderId:p_orderid},
									function(data)
									{
										if(data.succ == 1)
										{
											m_curOrder.state = 5;
										}
									}
								);
							break;
							//alert(b.index+"-"+p_orderid);
						}
						
					});
　　　　			} 


	  	  },
	  	  getOrdersByCat:function(p_strStat)
	  	  {
	  	  		objMap.splice(0,objMap.length);  
	  	  		this.rsPrds.splice(0,this.rsPrds.length);
	  	  		m_strOrderStatus = p_strStat;
	  	  		this.iCurPageNo = 1;
	  	  		this.m_iPageCount=1,
	  	  		this.loadOrders();
	  	  },
		  loadOrders:function()
		  {
			  var jData = {
					curPage:this.iCurPageNo,
					pageSize:g_iConstPageSize,
					qryName:"",
					OrderStatus:m_strOrderStatus
				};
	
				var thePrds = this;
				
//				mui.post(g_SrvUrl+'/zdm/AppApi/SupplierOrder/GetSupplierOrders',
//				JSON.stringify(jData),
//				function(data)
//				{
//					//alert(data.RecCount);
//					if(data.RecCount%g_iConstPageSize==0) 
//					{
//						thePrds.m_iPageCount = data.RecCount/g_iConstPageSize;
//					}
//					else
//					{
//						thePrds.m_iPageCount = parseInt(data.RecCount/g_iConstPageSize)+1;
//					}
//					//alert(thePrds.m_iPageCount);
//					
//					for(var i=0;i<data.Recs.length;i++)
//					{
//						thePrds.rsPrds.push(data.Recs[i]);
//					}
//					thePrds.iCurPageNo++;
//					
//				},'json');

				sespost('/zdm/AppApi/SupplierOrder/GetSupplierOrders',
					jData,
					function(data)
					{
						if(data.RecCount%g_iConstPageSize==0) 
						{
							thePrds.m_iPageCount = data.RecCount/g_iConstPageSize;
						}
						else
						{
							thePrds.m_iPageCount = parseInt(data.RecCount/g_iConstPageSize)+1;
						}
						//alert(thePrds.m_iPageCount);
						var now = new Date();
						for(var i=0;i<data.Recs.length;i++)
						{
							var strKey = data.Recs[i].id;
							if(objMap[strKey] == null)
							{
								objMap[strKey]=strKey;
								data.Recs[i].curYear = now.getYear();
								data.Recs[i].curMonth = now.getMonth();
								data.Recs[i].curDate = now.getDate();
								thePrds.rsPrds.push(data.Recs[i]);
							}
							
						}
						thePrds.iCurPageNo++;
					}
				);

		  }
	  }
	});

	</script>
	
	<script>
		
		
		
		mui.plusReady(function() 
		{
//			document.addEventListener('refresh', function(event) 
//			{
//				//alert(event.detail.orderid);
//				var segmentedControl = document.getElementById("segmentedControl");
//	            var links = segmentedControl.getElementsByTagName('a');
//	            for (var i = 0; i < links.length; i++) 
//	            {
//	                if (links[i].getAttribute('class').indexOf('mui-active') > 0) 
//	                {
//	                    links[i].setAttribute("class","mui-control-item");
//	                }
//	            }
//	            
//				links[0].setAttribute("class","mui-control-item mui-active");
//				theVue.getOrdersByCat(1);	
//				alert(event.detail.orderid);
//				theVue.m_iNewOrderId = event.detail.orderid;
//				mui('#pullrefresh').pullRefresh().refresh(true);
//			});
		});
						

//		var client = new Paho.MQTT.Client("10.6.1.137", parseInt(9001), "clientid8o9");//建立客户端实例  
//		client.connect({onSuccess:onConnect});//连接服务器并注册连接成功处理事件  
//		function onConnect() {  
//		    //alert("onConnected");  
//		    client.subscribe("abv2");//订阅主题  
//		}  
//		client.onConnectionLost = onConnectionLost;//注册连接断开处理事件  
//		client.onMessageArrived = onMessageArrived;//注册消息接收处理事件  
//		
//		function onConnectionLost(responseObject) {  
//		    if (responseObject.errorCode !== 0) {  
//		        console.log("onConnectionLost:"+responseObject.errorMessage);  
//		       //alert("连接已断开");  
//		     }  
//		}  
//		function onMessageArrived(message) {  
//			playMsgSound();
//		  //alert("收到消息:"+message.payloadString);  
//		}  
//		//发送消息  
//		//message = new Paho.MQTT.Message("hello");  
//		//message.destinationName = "/topic";  
//		//client.send(message);  
	</script>
	
	<script>
	function playMsgSound() 
	{
		mui.plusReady(function() 
		{
			var p = null;  
			if ( plus.audio == undefined ) {  
				alert( "Device not ready!" );  
			}
			
			//p = plus.audio.createPlayer( "_Doc/Audio/test.mp3" );
			p = plus.audio.createPlayer( "../../sound/msg.mp3" );
			p.play( function () 
				{
					//alert( "Audio play success!" );  
				}, 
				function ( e ) 
				{
					//alert( "Audio play error: " + e.message );  
				} 
			);
		});
	}
		
	</script>
	
	</body>

</html>